<template>
	<div class="input-group text-[#295ee9]">
		<el-select
			v-model="cityValue"
			placeholder=""
			class="custom-font !w-[45px] !h-[45px] !min-w-[45px] box-border"
		>
			<el-option
				class="custom-option-font-size"
				v-for="city of cities"
				:key="city"
				:label="city"
				:value="city"
			/>
		</el-select>
		<el-select
			v-model="wordValue"
			placeholder=""
			class="custom-font !w-[45px] !h-[45px] !min-w-[45px] box-border"
		>
			<el-option
				class="custom-option-font-size"
				v-for="city of words"
				:key="city"
				:label="city"
				:value="city"
			/>
		</el-select>
		<input
			v-for="(char, index) in inputValues"
			:key="index"
			v-model="inputValues[index]"
			type="text"
			maxlength="2"
			@input="handleInput($event, index)"
			:disabled="index === 5"
			class="input__item !w-[45px] !h-[45px] mb-2"
			:class="index === 5 && 'input-item-5'"
		/>

		<el-checkbox-group v-model="isNew" size="large" @change="handleCheck">
			<el-checkbox-button
				value="D"
				class="custom-checkbox-button"
				style="--el-color-primary: var(--el-color-success)"
			>
				新
			</el-checkbox-button>
		</el-checkbox-group>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	value: {
		type: String,
		default: '',
	},
});

onMounted(async () => {
	await initOriginValue();
	inputDoms.value = Array.from(
		document.querySelectorAll('.input-group .input__item'),
	);
});

function initOriginValue() {
	return new Promise((resolve) => {
		cityValue.value = props.value?.charAt(0) || '川';
		wordValue.value = props.value?.charAt(1) || 'A';
		const no = props.value
			?.substring(2)
			.padEnd(6, ' ')
			.split('')
			.map((item) => item.toUpperCase());
		if (no[5] === 'D') {
			isNew.value.push('D');
		}
		inputValues.value = no;
		resolve(true);
	});
}
// 城市
const cityValue = ref();
// 字母
const wordValue = ref();
// 输入框
const inputValues = ref<string[]>([]);
// 是否新能源
const isNew = ref<string[]>([]);
// 城市列表
const cities = [
	'京',
	'津',
	'沪',
	'渝',
	'冀',
	'晋',
	'辽',
	'吉',
	'黑',
	'苏',
	'浙',
	'皖',
	'闽',
	'赣',
	'鲁',
	'豫',
	'鄂',
	'湘',
	'粤',
	'琼',
	'川',
	'贵',
	'云',
	'陕',
	'甘',
	'青',
	'藏',
	'宁',
	'新',
];
// 字母列表
const words = [
	'A',
	'B',
	'C',
	'D',
	'E',
	'F',
	'G',
	'H',
	'J',
	'K',
	'L',
	'M',
	'N',
	'P',
	'Q',
	'R',
	'S',
	'T',
	'U',
	'V',
	'W',
	'X',
	'Y',
	'Z',
];
const emits = defineEmits(['valueChange']);
const inputDoms = ref<HTMLInputElement[]>([]);

watch(
	[cityValue, wordValue, inputValues],
	() => {
		emits(
			'valueChange',
			`${cityValue.value}${wordValue.value}${inputValues.value.join('')}`,
		);
	},
	{
		deep: true,
	},
);

let curr: any = null;

function handleInput(e: any, index: number) {
	// value 有时候是 "' 'L" 有时候是"L' '", 有时候是"3L"，现在要取L
	const value = e.target.value
		.toUpperCase()
		.split('')
		.filter((item: string) => item !== ' ' && item !== curr);
	// 过滤之后，输入和input框内容相同的，可能为空
	if (!value.length) value.push(curr);

	inputValues.value[index] = value.length > 1 ? value[1] : value[0];
	if (
		index < inputValues.value.length - 1 &&
		inputValues.value[index].length === 1
	) {
		inputDoms.value[index + 1].focus();
	}
}
function handleCheck(val: any) {
	inputValues.value[5] = val;
}
</script>

<style lang="scss" scoped>
.input-group {
	display: flex;
	gap: 0 6px;
	flex-wrap: wrap;
	:deep(.el-select__wrapper) {
		padding-right: 0;
	}
	:deep(.el-icon) {
		display: none;
	}
	input {
		--color: #38af20;
		width: 32px;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 3px;
		transition: all 0.3s;
		&:focus {
			border-color: var(--color);
		}
		&:last-child {
			color: var(--color);
		}
		&:disabled {
			background-color: #f2f2f2;
			color: #999;
			cursor: not-allowed;
			border: 1px solid #ddd;
		}
	}
}
.custom-font-size .el-input {
	font-size: 23px; /* 设置下拉框的字体大小 */
}

.custom-option-font-size {
	font-size: 24px; /* 设置选项的字体大小 */
}
.is__new {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 6px;
	font-size: 12px;
	color: #999;
	background-color: #f5f5f5;
	border-radius: 3px;
	user-select: none;
	cursor: pointer;
	transition: all 0.3s;
}
.active {
	background-color: #4899d0;
	color: #fff;
}

.custom-font {
	width: 200px; /* 设置宽度 */
	height: 40px; /* 设置高度 */
	// font-size: 26px;
}
:deep(.custom-font .el-select__placeholder) {
	font-size: 20px;
}
:deep(.custom-font .el-select__wrapper) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	text-align: center;
}
.custom-checkbox-button {
	width: 45px; /* 设置宽度 */
	height: 45px; /* 设置高度 */
}

/* 使用 Vue 3 的 ::v-deep 穿透选择器 */
.custom-checkbox-button::v-deep(.el-checkbox-button__inner) {
	width: 100%; /* 填充父容器的宽度 */
	height: 100%; /* 填充父容器的高度 */
	display: flex; /* 使用 Flexbox 布局 */
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	font-size: 14px; /* 调整字体大小 */
	padding: 0; /* 移除默认的内边距 */
	border-radius: 4px; /* 可选：调整圆角 */
	text-align: center; /* 确保文本居中 */
}
</style>
